<script setup>
import { useAttrs, computed } from 'vue'

defineProps({
  tag: {
    default: "a"
  }
})

const attrs = useAttrs()

const isExternalLink = computed(() => {
  return attrs.to.startsWith("http")
})

</script>

<template>
  <!-- 
    - 默认router-link会生成一个a标签
    - 可以通过为其添加custom属性来禁止生成标签
        然后通过手动指令，来设置最终生成什么标签
    - router-link可以通过v-slot获取到它的参数
        route 路由路径信息
        href 路径信息
        isActive 路由是否和当前路径匹配
        isExactActive 路由是否和当前路径完全匹配
        navigate 函数，跳转的函数
   -->
  <a v-if="isExternalLink" :href="attrs.to" target="_blank">
    <slot></slot>
  </a>
  <router-link v-else custom #="{ href, navigate, isExactActive }">
    <component :href="href" :is="tag" @click="navigate" :class="{ 'btn-exact-active': isExactActive }">
      <slot></slot>
    </component>
  </router-link>
</template>

<style scoped>
.btn-exact-active {
  background-color: #bfa;
}
</style>